<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .ready{
                color:red;
                font-size:40px;
            }
        </style>
        <script src="../js/jquery-3.4.1.min.js"></script>
        <script>
            $(function(){
                var win=0;
                var fail=0;
                var draw=0;
                var all=0;
                //给下拉列表绑定事件
                $("#choice").change(function(){
                    var selectVal=$("#choice").val();//获取选中项的value值

                    if(selectVal==1){
                        $("#youSelect").attr("src","caiquan/st.jpg");
                    }else if(selectVal==2){
                        $("#youSelect").attr("src","caiquan/jd.jpg");
                    }else if(selectVal==3){
                        $("#youSelect").attr("src","caiquan/bu.jpg");
                    }else{
                        $("#youSelect").attr("src","caiquan/zb.jpg");
                    }
                });
                
                //给确认出拳按钮绑定事件
                $("#confirm").click(function () {
                    var selectVal=$("#choice").val();//获取选中项的value值

                    //左上角你的选择
                    if(selectVal==1){
                        $("#you").attr("src","caiquan/st.jpg");
                    }else if(selectVal==2){
                        $("#you").attr("src","caiquan/jd.jpg");
                    }else if(selectVal==3){
                        $("#you").attr("src","caiquan/bu.jpg");
                    }else{
                        $("#you").attr("src","caiquan/zb.jpg");
                    }

                    //电脑的选择
                    // 电脑随机获取1-3的整数
                    let com=parseInt(Math.random()*3+1);

                    if(com==1){
                        $("#computer").attr("src","caiquan/st.jpg");
                    }else if(com==2){
                        $("#computer").attr("src","caiquan/jd.jpg");
                    }else if(selectVal==3){
                        $("#computer").attr("src","caiquan/bu.jpg");
                    }

                    var cha=selectVal-com;
                    if(cha==0){
                        draw++;
                        $("#draw").html(draw);
                        $(".ready").html("平局");
                    }else if(cha==-1 ||cha==2){
                        win++;
                        $("#win").html(win);
                        $(".ready").html("你赢了");
                    }else {
                        fail++;

                        $("#lose").html(fail);
                        $(".ready").html("你输了");

                    }
                    all++;
                    $("#all").html(all);

                });
            });
        </script>
    </head>
    <body>
        <table width="800" border="1" cellspacing="0px" height="600" align="center">
            <tbody align="center">
                <tr>
                    <td>
                        <img src="caiquan/zb.jpg" alt="" id="you">

                    </td>
                    <td>VS</td>
                    <td>
                        <img src="caiquan/zb.jpg" alt="" id="computer">
                    </td>
                </tr>
                <tr>
                    <td colspan="3" class="ready">
                        Are You Ready?
                    </td>
                    <!--<td></td>-->
                    <!--<td></td>-->
                </tr>
                <tr>
                    <td>
                        <img src="caiquan/zb.jpg" alt="" id="youSelect">
                    </td>
                    <td > choice </td>
                    <td>
                        <span>请选择出拳</span>
                        <br>
                        <select name="" id="choice">
                            <option value="-1">请选择</option>
                            <option value="1">石头</option>
                            <option value="2">剪刀</option>
                            <option value="3">布</option>
                        </select>
                        <input type="button" id="confirm" value="确认出拳">
                    </td>
                </tr>
                <tr>
                    <td colspan="3">
                        总数:<span id="all">0</span>
                        胜利:<span id="win">0</span>
                        失败:<span id="lose">0</span>
                        平局:<span id="draw">0</span>
                    </td>
                    <!--<td></td>-->
                    <!--<td></td>-->
                </tr>
            </tbody>
        </table>
    </body>
</html>